<template>
    <article class="item">
        <header class="name">
            <h1>{{item.name}}</h1>
            <button class="top-right" v-if="!ifAppointmented && this.percentage != 0"> <i class="el-icon-thumb" @click="handleAppointment">   预约</i></button>
            <button class="top-right" v-if="ifAppointmented"> <i class="el-icon-info" @click="notSupport"> 已预约</i></button>
        </header>

        <!-- <nav class="more">
             <a @click="notSupport">查看详情</a>
        </nav> -->

        <section class="img">
            <img :src="imageUrl">
        </section>

        <section class="content">
            <div class="address">
                <i class="el-icon-location">{{item.address}}</i>
            </div>
            <div class="phone">
                <i class="el-icon-phone-outline">{{item.phone}}</i>
            </div>
            <div class="date">
                <i class="el-icon-date">{{item.date}}</i>
            </div>
            <div class="time">
                <i class="el-icon-time">{{item.startTime}}-{{item.endTime}}</i>
            </div>
        </section>

        <aside class="chart">
            <div class="quotaRate">
                <el-progress 
                type="dashboard" 
                :percentage="percentage" 
                :color="colors"
                :format="label"
                ></el-progress>
            </div>
        </aside>

        <footer class="data">
            <div>
                <span id="total" class="icon iconfont" style="margin-left: 5px;color: #409EFF;">&#xe615;</span>
                {{item.maxNumber}}
            </div>
            <div>
                <span id="vaild" class="icon iconfont" style="margin-left: 5px;color: #67C23A;">&#xe609;</span>
                {{item.maxNumber - item.currentNumber}}
            </div>
            <div v-if="ifHot">
                <span id="fire" class="icon iconfont" style="margin-left: 5px;color: #ff6d6d;">&#xe608;</span>
            </div>
            <div v-if="this.percentage == 0">
                <span id="invaild" class="icon iconfont" style="margin-left: 5px;color: #ff6d6d;">&#xe731;</span>
            </div>
        </footer>

    </article>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name: "Quotaitem",
    props: {
        item: Object
    },
    data(){
        return {
            imageUrl: require("@/assets/doctor/doctoress.png"),
            // item: {
            //     date: "2022-05-26",
            //     name: "天津医院",
            //     address: "天津大学体育场",
            //     phone: "19960741644",
            //     startTime: "08:30:00",
            //     endTime: "11:30:00",
            //     maxNumber: 3,
            //     currentNumber: 3,
            // },
            colors: [
                {color: '#909399', percentage: 0},
                {color: '#F56C6C', percentage: 20},
                {color: '#E6A23C', percentage: 40},
                {color: '#67C23A', percentage: 100}
            ]
        }
    },
    computed: {
        ifAppointmented(){
            return this.$store.state.appointment.historyIds != null && this.$store.state.appointment.historyIds.indexOf(this.item.alid)>=0;
        },
        canAppointment(){
            return !this.ifAppointmented && this.item.maxNumber > this.item.currentNumber;
        },
        percentage(){
            return parseInt(100.0 * (this.item.maxNumber - this.item.currentNumber) / this.item.maxNumber);
        },
        ifHot(){
            return this.percentage!=0 && this.percentage < 50;
        }
    },
    methods: {
        notSupport: function(){
            this.$router.push("historyAppoiment");
        },
        label: function(percentage) {
            if (this.item.currentNumber == this.item.maxNumber) return "无法预约"
            return "剩余:"+percentage+"%"
        },
        handleAppointment: function() {
            if(this.canAppointment) {
                this.$confirm("确认预约？")
                .then(() => {
                    this.$store.dispatch("appointment/make_appointment", this.item.alid);
                })
                .catch(()=>{})
            } else {
                Message.error("无法预约");
            }
        }
    },
    created() {
        // console.log(this.item);
    }

}
</script>

<style scoped lang="scss">


article {

    position: relative;
    display: block; // 适应浏览器
    margin: auto;
    padding: 0 0 5px 0;
    width: 600px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

    &:focus {
        transform: scale(1.4);
    }

    border-radius: 25px;
    background-color: #DCDFE6;

    animation: tilt-in-top-1 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

header {
    // background-color: red;
    margin: 0 0 0 0 ;
    height: 20%;
    h1 {
        font-size: 21px;
        line-height: 50px;
        margin: 0 0 0 10%;
        position: relative;
        z-index: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 50%;
        color: #414141;
    }

    button {
        border-radius: 20px;
        border: 1px solid #8bc9da;
        background-color: #67C23A;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        padding: 5px 20px;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: transform 0.1s ease-in;

        &:active {
            transform: scale(0.9);
        }
    }

    .top-right {
        position: absolute;
        top: 10px;
        right: calc(50% - 300px + 5px);
        width: 150px;
    }

}

nav {
    // background-color: green;
    margin: 0 0 0 0 ;
    height: 10%;
}

section {
    // background-color:palevioletred;
    margin: 0 0 0 0 ;
    display: inline-block;
    vertical-align: top;
    width: 30%;
    height: 100px;

    img {
        position: relative;
        top: -10px;
        left: 50px;
        width: 100px;
        height: 100px;
        // object-fit: cover;
        border: 5px solid #409EFF;
        border-radius: 10px;
    }

    .content {
        width: 40%;
    }
}

aside {
    // background-color: wheat;
    margin: 0 0 0 0 ;
    height: 100px;
    width: 30%;
    float: right;

    .quotaRate {
        position: relative;
        top: -10px;
        right: -10px;
    }
}

footer {
    // background-color: aqua;
    margin: 0 0 0 0 ;
    text-align: left;

    position: absolute;
    top: 20px;
    right: calc(50% - 300px - 150px);
    width: 150px;

    display: none;
}


article:hover {

    section {
        transform: scale(0.9);
    }

    footer {
        display: inline-block;
        animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
}

@keyframes tilt-in-top-1 {
  0% {
    -webkit-transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
            transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
            transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}


@keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
            transform: translateZ(12px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


</style>